<template>
    <view class="fly-tabbar">
        <view class="flex-block">
            <view v-for="(item,index) in listData" :key="index" class="item" :class="currentType == item.type ? 'current' : ''" @click="gotoPage(item)">
                <view class="create" v-if="item.type == 'create'">
                    <u-image width="72rpx" height="72rpx" :src="item.icon" />
                </view>
                <template v-else>
                    <u-image width="48rpx" height="48rpx" :src="currentType == item.type ? item.icon2 : item.icon" />
                    <text>{{ item.title }}</text>
                </template>                
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const props = defineProps({
  current: {
    type: String,
    default: () => 'home'
  }
});
const currentType = computed(() => {
    return props.current;
});
const listData = computed(() => {
    let v = appStore.versionStatus;
    if(v){
        return list.def;
    }else{
        return list.pre
    }
});
let list = reactive({
    def: [
        {
            type: 'home',
            icon: proxy.$icon.offlineDef,
            icon2: proxy.$icon.offlinePre,
            title: '线下',
            url: '/pages/home/index'
        },
        {
            type: 'online',
            icon: proxy.$icon.onlineDef,
            icon2: proxy.$icon.onlinePre,
            title: '线上',
            url: '/pages/online/index'
        },
        {
            type: 'create',
            icon: proxy.$icon.add,
            icon2: proxy.$icon.add,
            title: '创建',
            url: '/pages/create/index'
        },
        {
            type: 'community',
            icon: proxy.$icon.communityDef,
            icon2: proxy.$icon.communityPre,
            title: '社区',
            url: '/pages/community/index'
        },
        {
            type: 'my',
            icon: proxy.$icon.mineDef,
            icon2: proxy.$icon.minePre,
            title: '我的',
            url: '/pages/my/index'
        },
    ],
    pre:[
    {
            type: 'home',
            icon: proxy.$icon.offlineDef,
            icon2: proxy.$icon.offlinePre,
            title: '线下',
            url: '/pages/home/index'
        },
        {
            type: 'online',
            icon: proxy.$icon.onlineDef,
            icon2: proxy.$icon.onlinePre,
            title: '线上',
            url: '/pages/online/index'
        },
        // {
        //     type: 'create',
        //     icon: proxy.$icon.add,
        //     icon2: proxy.$icon.add,
        //     title: '创建',
        //     url: '/pages/create/index'
        // },
        {
            type: 'community',
            icon: proxy.$icon.communityDef,
            icon2: proxy.$icon.communityPre,
            title: '历史',
            url: '/pages/community/index'
        },
        {
            type: 'my',
            icon: proxy.$icon.mineDef,
            icon2: proxy.$icon.minePre,
            title: '我的',
            url: '/pages/my/index'
        },
    ]
});
const gotoPage = (item) => {
    let url = item.url;
    console.log(url);
    let v = appStore.versionStatus;
    if(item.type == 'community'){
        if(v){
            url = '/pages/community/index';
        }else{
            url = '/packageB/activity/history'
        }
    }
    uni.reLaunch({url: url});
}
onShow(() => {

})
</script>
<style lang="scss">
.fly-tabbar{
    height:calc(120rpx + var(--safe-area-inset-bottom));
    .flex-block{
        position: fixed;bottom:var(--safe-area-inset-bottom);left:0;z-index:100;width:100%;height:120rpx;box-sizing: border-box; display: flex;justify-content: space-around;text-align:center;background:#fff;
        box-sizing: border-box;padding:10rpx 0;border-top:1rpx solid #ebedf0;
    }
    &::after{
        content: '';position: fixed;bottom:0;left:0;z-index:2;width:100%;height:var(--safe-area-inset-bottom);background: #fff;
    }
    .item{text-align:center;font-size:26rpx;}
    .create{
        margin-top:6rpx;
    }
}
.current{color:#24BCB8;}
</style>